<template>
  <div class="single-check">
    <div class="check-box-wrapper" @click.stop="checkCurrentBox(1)">
      <span class="left-check-icon" :class="{'check-left-check-icon':isChecked1}"></span>
      <p class="right-text">{{nameList[0]}}</p>
    </div>
    <div class="check-box-wrapper" @click.stop="checkCurrentBox(2)">
      <span class="left-check-icon" :class="{'check-left-check-icon':isChecked2}"></span>
      <p class="right-text">{{nameList[1]}}</p>
    </div>
  </div>
</template>

<script>
  import {bus} from './js/bus.js';

  export default {
    name: "",
    props: {
      nameList: {
        type: Array,
        default: function () {
          return ['次均', '人均'];
        }
      }
    },
    data(){
      return {
        value: '',
        isChecked1: true,
        isChecked2: false,
        type: 1
      }
    },
    created() {
      bus.$on('pageChange', () => {
        console.log('pageChange......uid===' + this._uid)
        setTimeout(() => {
          this.checkCurrentBox(1)
        }, 25)
      })
    },
    mounted(){

    },
    methods: {
      checkCurrentBox(type){
        if (type == this.type) {
          return;
        }
        this.type = type;
        if (type == 1) {
          this.isChecked1 = true;
          this.isChecked2 = false;
        } else {
          this.isChecked2 = true;
          this.isChecked1 = false;
        }
        this.$emit('singleCheck', type)
      }
    }
  }
</script>

<style scoped>
  .single-check {
    overflow: hidden;
    float: left;
  }

  .left-check-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    background-image: url("./check-box/no_checkmark.png");
  }

  .check-left-check-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    background-image: url("./check-box/checkmark.png");
  }

  .right-text {
    display: inline-block;
    margin-left: 5px;
  }

  .check-box-wrapper {
    display: flex;
    align-items: center;
    height: 30px;
    line-height: 30px;
    float: left;
    cursor: pointer;
    margin-right: 10px;
  }
</style>
